<template>
 <div class="hospital">
    <!-- 左侧导航区域 -->
    <div class="menu">
      <div class="top">
        <el-icon><HomeFilled /></el-icon>
        <span> / 医院信息</span>
      </div>
      <el-menu
        default-active="0"
        class="el-menu-vertical-demo"
        @select="climenu"
      >
        <el-menu-item index="0">
            <el-icon><Menu /></el-icon>
            <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="1">
          <el-icon><Document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon><setting /></el-icon>
          <span>预约通知</span>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon><setting /></el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容展示区域:路由组件展示位置 -->
    <div class="content">
      <!-- 子组件展示结构地方 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { Document, Menu, Setting, InfoFilled, Search, HomeFilled} from "@element-plus/icons-vue";
import { ref,onMounted } from 'vue'
import { RouterView,useRouter,useRoute } from 'vue-router';

import useDetailStore from "@/store/module/HospitalDetail"
const route=useRoute()
const detailStore=useDetailStore()
onMounted(()=>{
    detailStore.getHospital(route.query.hoscode as string)
    detailStore.getDeparment(route.query.hoscode as string)
})

//点击展示二级路由
const router=useRouter()
const climenu=(index:any)=>{
    const pathArr=['/hospital/register','/hospital/detail','/hospital/notice','/hospital/close','/hospital/search']
    router.push({path:pathArr[index],query:{hoscode:route.query.hoscode}})
}

</script>

<script lang="ts">
export default {
    name:"hos"
}
</script>

<style scoped lang="scss">
a {
    color:  #3a3a3a;
    text-decoration: none;
}
.hospital {
    display: flex;
}
</style>
